<template>
  <div>
    <div class="box" @click="addSignature" v-if="!imageSrc">
      <div class="addSignature" style="width:100%">
        <i class="el-icon-edit"></i>
        添加签名
      </div>
    </div>
    <signDialog :show.sync="showSign" @ok="handleSignFinish"></signDialog>
    <div
      v-if="imageSrc"
      class="ejSbaT"
      :style="{backgroundImage:'url('+imageSrc+')'}"
      @click="preview"
    >
      <div class="remove" @click="removeImg" v-if="!readonly&&!disabled">
        <i class="el-icon-remove"></i>
      </div>
    </div>
    <van-dialog v-model:show="dialogPreview" :before-close="beforeClose" title="signature.png" show-cancel-button confirmButtonText="下载" confirmButtonColor="#ee0a24">
      <van-image
        width="10rem"
        height="10rem"
        fit="contain"
        :src="imageSrc"
      />
    </van-dialog>
  </div>
</template>

<script>
import SignDialog from "./component/signDialog";
export default {
  name: "pm-sign",
  components: { SignDialog },
  props: {
    value: {
      type: String | Number | Object | Array
    },
    mode: {
      // 编辑态: edit, 查看态:view , 用于在子表格内切换状态
      default: "edit"
    },
    entityModel: {
      // 如果组件绑定了一个实体, 则该属性会传入实体的数据
      default: () => {}
    },
    readonly: {
      default: false
    },
    disabled: {
      default: false
    },
    settings: {
      type: Object,
      default: () => {}
    },
    icon: "",
    viewId: {},
    viewCode: {
      default: "view"
    }
  },
  data() {
    return {
      showSign: false,
      imageSrc:'',
      dialogPreview:false
    };
  },
  mounted() {
    this.imageSrc = this.value;
  },
  methods: {
    addSignature() {
      this.showSign = true;
    },
    handleSignFinish(img) {
      this.imageSrc = img;
      this.$emit("input", img);
    },
    removeImg() {
      this.imageSrc = "";
      this.$emit("input", "");
    },
    preview() {
      this.dialogPreview = true;
    },
    downloadSignImg() {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = this.imageSrc;
    },
    beforeClose(action,done){
      if (action === 'confirm') {
        this.downloadSignImg()
        done()
      } else {
        // 拦截取消操作
        this.dialogPreview = false
        done()
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  -webkit-appearance: none;
  background: #f7f7f7;
  border: 1px solid #f7f7f7;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 13px;
  height: 36px;
  outline: none;
  padding: 0 12px;
  width: 100%;
  cursor: pointer;
}
.addSignature {
  color: rgb(117, 117, 117);
  line-height: 36px;
}
.app-sign-canvas {
  width: 100%;
  height: 300px;
}
.Gray {
  font-size: 15px;
  color: #333;
}
.ejSbaT {
  position: relative;
  height: 130px;
  background-color: rgb(255, 255, 255);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 4px, rgba(0, 0, 0, 0.12) 0px 0px 2px;
  border-radius: 4px;
}
.ejSbaT .remove {
  position: absolute;
  right: -8px;
  top: -8px;
  // visibility: hidden;
}
// .ejSbaT:hover {
//   .remove {
//     visibility: visible;
//   }
// }
.dragAbleContainer {
  align-items: center;
  display: flex;
  justify-content: center;
}
.previewContainer .imageViewer {
  overflow: visible;
}
.previewContainer .fileViewer {
  border: none;
  height: 100%;
  position: absolute;
  width: 100%;
}
::v-deep .van-dialog__content{
  text-align: center;
}
</style>